<!--
 * @Description: 制造商用户中心页面
 * @Author: augn
 * @Date: 2022-10-20 23:24:55
 * @LastEditTime: 2022-11-02 10:32:40
 * @LastEditors: Gaq
-->
<script setup>
  import request from "@/utils/request";
  import router from "@/router";
  import { ElMessage } from "element-plus";

  const role = JSON.parse(localStorage.getItem("user")).role;
  const roleId = JSON.parse(localStorage.getItem("user")).roleId;
  const manager = JSON.parse(localStorage.getItem("user")).manager === 1 ? true : false;

  let goods = ref({
    culId: role === "inheritor" ? roleId : null,
    manuId: role === "manufacturer" ? roleId : null,
    goodsId: role != "inheritor" && role != "manufacturer" ? -1 : null,
  });
  const post = ref({
    userId: JSON.parse(localStorage.getItem("user")).userId,
  });
  const staff = {
    role: role,
    roleId: roleId,
  };
  let userInfo = ref({});
  let staffItem = ref([]);
  let goodsItem = ref([]);
  let postItem = ref([]);

  const activeIndex = ref("1");
  const activeIndex1 = ref("1");
  const isEmpty = ref(false);
  const isLoading = ref(false);
  const staffDrawer = ref(false);
  const choose = ref(3);
  const upStaff = ref(0);
  let noClick = ref(true);
  const files = ref([]);
  const upload = ref(false);

  onBeforeMount(() => {
    getGoodsList();
    getUserInfo();
  });

  const loginOut = () => {
    localStorage.clear();
    router.push({
      path: "/",
    });
  };

  const change = (res) => {
    choose.value = res;
    if (res === 1) {
      getNewUserInfo();
    }
    if (res === 2) {
      getStaffList();
    }
    if (res === 3) {
      getGoodsList();
      if (goodsItem.value.length != 0) {
        isEmpty.value = true;
      } else {
        isEmpty.value = false;
      }
    }
    if (res === 4) {
      getPostList();
      if (postItem.value.length != 0) {
        isEmpty.value = true;
      } else {
        isEmpty.value = false;
      }
    }
  };

  const handleSelect = (key) => {
    if (key === "1") {
      goods.value.keyword = "";
    } else if (key === "2") {
      goods.value.keyword = "文具";
    } else if (key === "3") {
      goods.value.keyword = "衣物";
    } else if (key === "4") {
      goods.value.keyword = "装饰品";
    } else if (key === "5") {
      goods.value.keyword = "纪念品";
    } else if (key === "6") {
      goods.value.keyword = "玩具";
    } else if (key === "7") {
      goods.value.keyword = "家纺";
    } else if (key === "8") {
      goods.value.keyword = "餐具";
    }
    getGoodsList();
  };

  const handleSelect1 = (key) => {
    if (key === "1") {
      post.value.notSort = "";
      post.value.sort = "";
    } else if (key === "2") {
      post.value.sort = "";
      post.value.notSort = "招商";
    } else if (key === "3") {
      post.value.notSort = "";
      post.value.sort = "招商";
    }
    getPostList();
  };

  const getUserInfo = () => {
    userInfo.value = JSON.parse(localStorage.getItem("user"));
  };

  const getGoodsList = () => {
    request.post(`/goods/getPart`, goods.value).then((res) => {
      if (res.code == -1) {
        console.log(res.msg);
        isEmpty.value = true;
      } else {
        goodsItem.value = res.data.goodsList;
        isEmpty.value = false;
        isLoading.value = false;
      }
    });
  };

  const getPostList = () => {
    request.post(`/post/getPart`, post.value).then((res) => {
      if (res.code == -1) {
        console.log(res.msg);
        isEmpty.value = true;
      } else {
        postItem.value = res.data.postList;
        isEmpty.value = false;
        isLoading.value = false;
      }
    });
  };

  const goGoodsDetail = (goodsId) => {
    const routeUrl = router.resolve({
      name: "goodsEditor",
      query: { goodsId },
    });
    window.open(routeUrl.href, "_blank");
  };

  const goPostDetail = (postId) => {
    const routeUrl = router.resolve({
      name: "postEditor",
      query: { postId },
    });
    window.open(routeUrl.href, "_blank");
  };

  const goToAddPost = () => {
    const postId = "";
    const routeUrl = router.resolve({
      name: "postEditor",
      query: { postId },
    });
    window.open(routeUrl.href, "_blank");
  };

  const goToAddGoods = () => {
    const goodsId = "";
    const routeUrl = router.resolve({
      name: "goodsEditor",
      query: { goodsId },
    });
    window.open(routeUrl.href, "_blank");
  };

  const getStaffList = () => {
    request.post(`/user/getPart`, staff).then((res) => {
      if (res.code == -1) {
        console.log(res.msg);
      } else {
        staffItem.value = res.data.userList;
      }
    });
  };

  const userInfoSubmit = (res) => {
    if (res.userId === undefined) {
      request.post(`/user/insertOne`, res).then((res) => {
        if (res.code == -1) {
          ElMessage.warning(res.msg);
        } else {
          ElMessage.success("新增用户信息成功");
        }
        newStaff = false;
      });
    } else {
      request.put(`/user/updateOne`, res).then((res) => {
        if (res.code == -1) {
          ElMessage.warning(res.msg);
        } else {
          ElMessage.success("更新用户信息成功");
        }
      });
    }

  };

  const getNewUserInfo = () => {
    request.get(`/user/getOne/` + userInfo.value.userId).then((res) => {
      if (res.code == -1) {
        console.log(res.msg);
      } else {
        userInfo.value = res.data;
        localStorage.setItem("user", JSON.stringify(res.data));
      }
    });
  };

  const onChange = (file, fileList) => {
    files.value.push(file.raw);
    upload.value = true;
  };

  const handleUploadImage = () => {
    const formData = new FormData();
    formData.append('file', files.value[0]);
    request.post(`/uploadImg`, formData).then((res) => {
      userInfo.value.image = res.data;
      upload.value = false;
      files.value = [];
    });
  };

  const deleteStaff = (index, id) => {
    request.delete(`/user/deleteOne/` + id).then((res) => {
      console.log(res);
      if (res.code == -1) {
        console.log(res.msg);
      } else {
        staffItem.value.splice(index, 1);
      }
    });
  };

  const updateStaff = (res) => {
    upStaff.value = res;
    staffDrawer.value = true;
  };

  const insertStaff = () => {
    var staff = {
      role: role,
      roleId: roleId
    };
    staffItem.value.push(staff);
    ElMessage.warning("请补全并提交新员工信息");
  };
</script>

<template>
  <div class="productBox">
    <el-container>
      <el-aside class="aside">
        <div style="
            display: flex;
            flex-direction: column;
            align-items: center;
            height: 30vh;
          ">
          <img :src="userInfo.image" style="width: 100px; border-radius: 25px" />
          <div style="margin-top: 10px; font-size: 30px">
            {{ userInfo.name }}
          </div>
          <div class="loginOut" @click="loginOut">退出登录</div>
        </div>

        <div>
          <div style="
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-between;
            ">
            <div class="choose" :style="{ color: choose === 1 ? 'white' : '' }" @click="change(1)">
              个人设置
            </div>
            <div v-show="manager" class="choose" :style="{ color: choose === 2 ? 'white' : '' }" @click="change(2)">
              员工管理
            </div>
            <div class="choose" :style="{ color: choose === 3 ? 'white' : '' }" @click="change(3)">
              商品管理
            </div>
            <div class="choose" :style="{ color: choose === 4 ? 'white' : '' }" @click="change(4)">
              我的帖子
            </div>
          </div>
        </div>
      </el-aside>

      <el-main class="main">
        <!-- 个人设置 -->
        <div v-if="choose == 1">
          <el-form :model="userInfo" label-width="120px" style="margin: 50px">
            <el-form-item lable="头像">
              <img :src="userInfo.image"
                style="width: 120px; box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;" />
              <el-button v-show="!upload" style="margin-left: 5px;">
                <el-upload accept="image/jpeg,image/gif,image/png" :file-list="files" :auto-upload='false'
                  :show-file-list="false" :on-change="onChange">
                  选择图片
                </el-upload>
              </el-button>
              <el-button style="margin-left: 5px;" @click="handleUploadImage" v-show="upload">上传头像
              </el-button>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="userInfo.name" />
            </el-form-item>
            <el-form-item label="角色">
              <el-input v-model="userInfo.role" />
            </el-form-item>
            <el-form-item label="性别">
              <el-input v-model="userInfo.sex" />
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="userInfo.telephoneNum" />
            </el-form-item>
            <el-form-item label="账号">
              <el-input v-model="userInfo.account" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="userInfo.password" />
            </el-form-item>
            <el-form-item style="display: flex; justify-content: space-between">
              <el-button type="primary" @click="$noMulClicks(userInfoSubmit, userInfo)">提交</el-button>
              <el-button style="margin-left: 100px">取消</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 员工管理 -->
        <div v-if="choose == 2" v-show="manager">
          <el-table :data="staffItem" height="100%" style="width: 100%">
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="sex" label="性别" />
            <el-table-column prop="account" label="账号" />
            <el-table-column prop="password" label="密码" />
            <el-table-column prop="telephoneNum" label="电话号码" />
            <el-table-column label="是否为管理者">
              <template #default="staff">
                {{ staff.row.manager === 1 ? "是" : "否" }}
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template #default="staff">
                <!-- 删除确认弹出框-弹出不生效 -->
                <el-popconfirm title="确定要删除吗?" @confirm="deleteStaff(staff.$index, staff.row.userId)">
                  <template #reference>
                    <el-button link type="primary" size="small">删除</el-button>
                  </template>
                </el-popconfirm>
                <el-button link type="primary" size="small" @click="updateStaff(staff.$index)">编辑
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="width: 100%; height: 40px; text-align: center;
              box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;">
            <div class="plus" @click="insertStaff">
              <el-icon :size="20" style="margin-top: 10px;">
                <i-ep-Plus />
              </el-icon>
            </div>
          </div>
        </div>

        <!-- 商品管理 -->
        <div v-if="choose == 3">
          <div>
            <el-affix :offset="0">
              <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#545c64"
                text-color="#fff" active-text-color="#ffd04b" @select="handleSelect">
                <el-menu-item index="1">全部</el-menu-item>
                <el-menu-item index="2">文具</el-menu-item>
                <el-menu-item index="3">衣物</el-menu-item>
                <el-menu-item index="4">装饰品</el-menu-item>
                <el-menu-item index="5">纪念品</el-menu-item>
                <el-menu-item index="6">玩具</el-menu-item>
                <el-menu-item index="7">家纺</el-menu-item>
                <el-menu-item index="8">餐具</el-menu-item>
              </el-menu>
            </el-affix>
          </div>

          <div v-show="!isEmpty">
            <span v-show="isLoading" style="font-size: large">加载中......</span>
            <div class="list" v-show="goodsItem.length">
              <div class="item" v-for="(goods, index) in goodsItem" @click="goGoodsDetail(goods.goodsId)">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="goods.cover" class="image" />
                  <div style="padding: 10px">
                    <span style="color: red; font-size: large">￥{{ goods.coverPrice }}</span>
                    <div class="bottom">
                      <span>{{ goods.introduction }}</span>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
          <div class="empty" v-show="isEmpty">
            <el-empty description="暂时没有您想要的商品~~" />
          </div>

          <div class="add" @click="goToAddGoods">
            <el-icon :size="60">
              <i-ep-Plus />
            </el-icon>
          </div>
        </div>

        <!-- 我的帖子 -->
        <div v-if="choose == 4">
          <el-affix :offset="0">
            <el-menu :default-active="activeIndex1" class="el-menu-demo" mode="horizontal" background-color="#545c64"
              text-color="#fff" active-text-color="#ffd04b" @select="handleSelect1">
              <el-menu-item index="1">全部</el-menu-item>
              <el-menu-item index="2">日常贴</el-menu-item>
              <el-menu-item index="3">招商贴</el-menu-item>
            </el-menu>
          </el-affix>
          <!-- 使用v-show时二次进入乱版 -->
          <div v-if="!isEmpty">
            <span v-show="isLoading" style="font-size: large">加载中......</span>
            <div v-masonry transition-duration="0.3s" item-selector=".item" class="list" v-show="postItem.length">
              <div v-masonry-tile class="item" v-for="(post, index) in postItem" @click="goPostDetail(post.postId)">
                <el-card :body-style="{ padding: '0px' }">
                  <img :src="post.image" class="image" />
                  <div style="padding: 10px">
                    <div class="bottom">
                      <span>{{ post.title }}</span>
                    </div>
                  </div>
                </el-card>
              </div>
            </div>
          </div>
          <div class="empty" v-show="isEmpty">
            <el-empty description="暂时没有您想要的帖子~~" />
          </div>

          <div class="add" @click="goToAddPost">
            <el-icon :size="60">
              <i-ep-Plus />
            </el-icon>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>

  <!-- 管理员工信息 -->
  <el-drawer v-model="staffDrawer" title="updateStaff" :with-header="false">
    <el-form :model="staffItem[upStaff]" label-width="120px" style="margin: 50px">
      <el-form-item label="姓名">
        <el-input v-model="staffItem[upStaff].name" />
      </el-form-item>
      <el-form-item label="性别">
        <el-input v-model="staffItem[upStaff].sex" />
      </el-form-item>
      <el-form-item label="手机号">
        <el-input v-model="staffItem[upStaff].telephoneNum" />
      </el-form-item>
      <el-form-item label="账号">
        <el-input v-model="staffItem[upStaff].account" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="staffItem[upStaff].password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="userInfoSubmit(staffItem[upStaff])">提交</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>

<style lang="less" scoped>
  .choose {
    margin-top: 20px;
  }

  .choose:hover {
    cursor: pointer;
    color: aliceblue;
  }

  .productBox {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    background-color: aliceblue;
  }

  .aside {
    width: 20vw;
    height: 100vh;
    padding: 30px;
    background-color: coral;
  }

  .main {
    width: 80vw;
    height: 100vh;
    overflow: auto !important;
  }

  .main::-webkit-scrollbar {
    display: none;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
  }

  .add {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    text-align: center;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
      rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    position: absolute;
    z-index: 999;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }

  .add:hover {
    color: red;
    cursor: pointer;
  }

  .item {
    margin: 10px;
    display: flex;
    flex-direction: column;
    width: calc(100% / 4 - 20px);
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
  }

  .image {
    width: 100%;
  }

  .bottom {
    height: 30px;
    margin-top: 10px;
    line-height: 15px;
    display: -webkit-box;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 12px;
    color: rgb(74, 72, 72);
  }

  .goodsItem:hover,
  .goodsItem:focus,
  .goodsItem:active {
    cursor: pointer;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }

  .loginOut:hover {
    color: white;
  }

  .plus {
    text-align: center;
  }

  .plus:hover {
    cursor: pointer;
    color: red;
  }
</style>